<style>
    .layui-form .layui-form-item .layui-inline .layui-form-label {
        width: 300px;
        font-size: 18px;
        font-weight: bold;
    }
    .layui-form .layui-form-item .layui-inline .layui-input-inline input{
        width: 300px;
        font-size: 16px;
    }
</style>
<form class="layui-form  seller-form" id="userAdd" style="padding:20px;min-height: 600px;height: auto">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            Test Tran Pay
        </legend>
    </fieldset>
    <br/>
    <br/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Amount：</label>
            <div class="layui-input-inline">
                <input type="text" name="amount"
                       lay-verify="required_en|number_en" maxlength="30" placeholder="$"
                       lay-verType="tips"  class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Mid：</label>
            <div class="layui-input-inline">
                <input type="text" name="mid"
                       lay-verify="required_en"
                       lay-verType="tips"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Card Token：</label>
            <div class="layui-input-inline" >
                <input type="text" name="card_token" style="width: 813px;"
                       lay-verify="required_en" placeholder="**YOUR CARD TOKEN**"
                       lay-verType="tips"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">for Num：</label>
            <div class="layui-input-inline" >
                <input type="text" name="num" style="width: 813px;"
                       lay-verify="required_en" placeholder="**for Num**"
                       lay-verType="tips"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Webhook Endpoint：</label>
            <div class="layui-input-inline" >
                <input type="text" name="endpoint_url" style="width: 813px;border: 0px;" readonly
                       value="https://sandboxendpoint.betterepay.com/api/review"
                       lay-verify="required_en" placeholder=""
                       lay-verType="tips"  class="layui-input">
            </div>
        </div>
    </div>
    <br/>
    <span style="padding-left: 200px;font-size: 20px;">The ⑦ Url : https://sandboxendpoint.betterepay.com/api/accept</span>
    <br/>
    <span style="padding-left: 200px;font-size: 20px;">The ⑨ Url : https://sandboxendpoint.betterepay.com/api/review</span>
    <div class="layui-form-item" style="padding-top: 100px;padding-left: 100px;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="save">confirm</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form'], function () {
        var form = layui.form;

        form.on('submit(save)', function(data){
            JsPost("{:url('test/tranPay')}", data.field, function(res){
                layer.msg(res.msg , {icon:1,time:1000});
            });
        });
    });
</script>